<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>运输订单统计</title>
    <!-- 引入WeUI CSS -->
    <link rel="stylesheet" href="./weui/weui.min.css">
    <style>
        /* 全局样式 */
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            min-height: 100vh;
            padding-bottom: 20px;
        }
       .weui-form__opr-area:last-child{
          margin-bottom: 0!important;
        }
        .page-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 15px;
        }
        
        /* 头部样式优化 */
        .header {
            text-align: center;
            margin-bottom: 25px;
            padding: 25px 0 15px;
            position: relative;
        }
        
        .header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(to right, #07C160, #10a5c5);
            border-radius: 2px;
        }
        
        .header-title {
            font-size: 26px;
            color: #333;
            font-weight: 600;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }
        
        .header-desc {
            font-size: 15px;
            color: #666;
            line-height: 1.5;
        }
        
        /* 统计卡片样式 */
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            flex: 1;
            /* min-width: 200px; */
            background: linear-gradient(135deg, #8ed1a8, #21CBF3);
            color: white;
            padding: 10px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
            text-align: center;
            transition: transform 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-3px);
        }
        
        .stat-title {
            font-size: 16px;
            margin-bottom: 10px;
            opacity: 0.9;
        }
        
        .stat-value {
            font-size: 28px;
            font-weight: bold;
            margin: 10px 0;
        }
        
        /* 日期范围信息 */
        .date-range-info {
            text-align: center;
            margin-bottom: 20px;
            color: #666;
            font-style: italic;
            font-size: 14px;
        }
        
        /* 筛选区域样式 */
        .weui-form {
            background-color: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            padding: 15px;
            box-sizing: border-box;
            transition: transform 0.3s;
        }
        
        .weui-form:hover {
            transform: translateY(-3px);
        }
        
        .weui-cells__title {
            margin-top: 1.5em;
            margin-bottom: 0.5em;
            font-size: 16px;
            color: #666;
        }
        
        .weui-cell {
            padding: 16px 0;
        }
        
        .weui-label {
            font-size: 16px;
            color: #333;
            width: 80px;
            font-weight: 500;
        }
        
        .weui-input, .weui-select {
            font-size: 16px;
            color: #333;
            padding: 10px 0;
            border-bottom: 1px solid #e5e5e5;
            width: 100%;
            transition: border-color 0.3s;
        }
        
        .weui-input:focus, .weui-select:focus {
            border-bottom: 2px solid #07C160;
            padding-bottom: 9px;
        }
        
        .filter-row {
            display: flex;
            /* flex-wrap: wrap; */
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .filter-group {
            flex: 1;
            min-width: 200px;
        }
        
        /* 按钮样式 */
        .weui-form__opr-area {
            margin: 25px 0;
        }
        
        .weui-btn_primary {
            background: linear-gradient(to right, #07C160, #10a5c5);
            border-radius: 10px;
            height: 48px;
            font-size: 18px;
            font-weight: 500;
            box-shadow: 0 4px 10px rgba(7, 193, 96, 0.3);
            transition: all 0.3s;
         
        }
       .weui-btn:not(.weui-btn_mini)+.weui-btn:not(.weui-btn_mini){
           margin-top: 0
       }
        .weui-btn_primary:not(.weui-btn_disabled):active {
            transform: translateY(2px);
            box-shadow: 0 2px 5px rgba(7, 193, 96, 0.3);
        }
        
        .weui-btn_default {
            border-radius: 10px;
            height: 48px;
            font-size: 18px;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .weui-btn_default:active {
            transform: translateY(2px);
            background-color: #f2f2f2;
        }
        
        /* 无数据提示 */
        .no-data {
            text-align: center;
            padding: 30px;
            color: #999;
            font-size: 16px;
        }
        
        /* 响应式调整 */
        @media (max-width: 480px) {
            .stat-card {
                /* min-width: 100%; */
            }
            
            .filter-group {
                min-width: 100%;
            }
            
            .header-title {
                font-size: 22px;
            }
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="header">
            <h1 class="header-title">运输订单统计</h1>
        </div>
        

        
        <div class="stats-container">
            <div class="stat-card">
                <div class="stat-title">订单数量</div>
                <div class="stat-value" id="orderCount">0</div>
                <div class="stat-desc">总计</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">总重量 (kg)</div>
                <div class="stat-value" id="totalWeight">0</div>
                <div class="stat-desc">总计</div>
            </div>
        </div>
        
        <div class="weui-form">
            <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells__title">筛选条件</div>
                
                <!-- 日期筛选 -->
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd">
                            <label class="weui-label">开始日期</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="date" id="startDate">
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd">
                            <label class="weui-label">结束日期</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="date" id="endDate">
                        </div>
                    </div>
                </div>
                
                <!-- 公司筛选 -->
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd">
                            <label class="weui-label">起点公司</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" id="startCompany" placeholder="输入起点公司名">
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd">
                            <label class="weui-label">终点公司</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" id="endCompany" placeholder="输入终点公司名">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="weui-form__opr-area">
                <div class="filter-row">
                    <button type="button" class="weui-btn weui-btn_default" onclick="resetFilters()">清空筛选</button>
                    <button type="button" class="weui-btn weui-btn_primary" onclick="filterStats()">筛选统计</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入WeUI JS -->
    <script src="./weui/weui.min.js"></script>
    <script src="./weui/axios.min.js"></script>
    <script src="./axios.js"></script>
    
    <script type="module">
        import { getOrders } from './api.js';
        
        // 设置默认日期为当月1号到当前日期
        function setDefaultDate() {
            const today = new Date();
            const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
            
            const formatDate = (date) => {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            };
            
            document.getElementById('startDate').value = formatDate(firstDay);
            document.getElementById('endDate').value = formatDate(today);
            
            updateDateRangeInfo(firstDay, today);
        }
        
        // 更新日期范围信息显示
        function updateDateRangeInfo(startDate, endDate) {
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            const startStr = startDate.toLocaleDateString('zh-CN', options);
            const endStr = endDate.toLocaleDateString('zh-CN', options);
            
            document.getElementById('dateRangeInfo').textContent = 
                `当前统计日期范围: ${startStr} 至 ${endStr}`;
        }
        
        // 计算统计信息
        function calculateStats(orders, startDate, endDate, startCompany, endCompany) {
            let filteredOrders = orders;
            
            // 按日期筛选
            if (startDate && endDate) {
                const start = new Date(startDate);
                const end = new Date(endDate);
                
                filteredOrders = filteredOrders.filter(order => {
                    const orderDate = new Date(order.date);
                    return orderDate >= start && orderDate <= end;
                });
                
                updateDateRangeInfo(start, end);
            }
            
            // 按起点公司筛选
            if (startCompany) {
                const searchTerm = startCompany.toLowerCase();
                filteredOrders = filteredOrders.filter(order => 
                    order.startCompany && order.startCompany.toLowerCase().includes(searchTerm)
                );
            }
            
            // 按终点公司筛选
            if (endCompany) {
                const searchTerm = endCompany.toLowerCase();
                filteredOrders = filteredOrders.filter(order => 
                    order.endCompany && order.endCompany.toLowerCase().includes(searchTerm)
                );
            }
            
            // 计算总数和总重量
            const count = filteredOrders.length;
            const totalWeight = filteredOrders.reduce((sum, order) => sum + (parseFloat(order.weight) || 0), 0);
            
            return {
                count,
                totalWeight: totalWeight.toFixed(2)
            };
        }
        
        // 更新统计显示
        function updateStatsDisplay(stats) {
            document.getElementById('orderCount').textContent = stats.count;
            document.getElementById('totalWeight').textContent = stats.totalWeight;
        }
        
        // 筛选统计
  function filterStats() {
            const startDate = document.getElementById('startDate')?.value;
            const endDate = document.getElementById('endDate')?.value;
            const startCompany = document.getElementById('startCompany')?.value;
            const endCompany = document.getElementById('endCompany')?.value;
            
            // 显示加载中
            const loading = weui.loading('加载中...');
            
            getOrders().then(orders => {
                const stats = calculateStats(orders, startDate, endDate, startCompany, endCompany);
                updateStatsDisplay(stats);
                loading.hide();
            }).catch(error => {
                console.error('获取订单失败:', error);
                loading.hide();
                weui.toast('加载失败', {
                    className: 'weui-toast_warn',
                    duration: 2000
                });
            });
        }
        
        // 重置筛选条件
        function resetFilters() {
            setDefaultDate();
            document.getElementById('startCompany').value = '';
            document.getElementById('endCompany').value = '';
            filterStats();
        }
        
        // 初始化页面
        async function initPage() {
            setDefaultDate();
            
            // 显示加载中
            const loading = weui.loading('加载数据...');
            
            try {
                const orders = await getOrders();
                const stats = calculateStats(
                    orders, 
                    document.getElementById('startDate').value,
                    document.getElementById('endDate').value,
                    '',
                    ''
                );
                updateStatsDisplay(stats);
                loading.hide();
            } catch (error) {
                console.error('初始化失败:', error);
                loading.hide();
                weui.toast('加载失败', {
                    className: 'weui-toast_warn',
                    duration: 2000
                });
            }
        }
        
        document.addEventListener('DOMContentLoaded', initPage);
        
        // 暴露函数给全局作用域
        window.filterStats = filterStats;
        window.resetFilters = resetFilters;
    </script>
</body>
</html>